<script lang="ts" setup>
import { markRaw, nextTick,   reactive, ref,  onBeforeUpdate, defineAsyncComponent } from "vue";
import * as echarts from 'echarts';

const props = defineProps({
  info1: Object,
  info2: String,
  info3: String
})

const elementChart1 = ref()
const elementChart2 = ref()
const elementChart3 = ref()

const state = reactive({
  myCharts: [] as any,
  chartData: {
    element1: null as any,
    element2: null as any,
    element3: null as any,
  },
})

const initChart1 = () => {

  state.chartData.element1 = markRaw(echarts.init(elementChart1.value));
  const option = {
    backgroundColor: '#FF000000',
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["100", "200", "300", "400"],
      top: "2%",
      right: '10',
      textStyle: {
        color: "rgba(250,250,250,0.6)",
        fontSize: 16
      }
    },
    xAxis: {
      data: props.info1?.names,
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      axisTick: {
        show: true //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(250,250,250,0.6)", //X轴文字颜色
          fontSize: 16
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ["rgba(250,250,250,0.1)", "rgba(250,250,250,0)"]
        }
      }
    },
    yAxis: [{
      type: "value",
      /*name: "亿元",*/
      nameTextStyle: {
        color: "#ebf8ac",
        fontSize: 16
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(250,250,250,0.6)",
          fontSize: 16
        }
      },

    },
    {
      type: "value",
      /*name: "同比",*/
      nameTextStyle: {
        color: "#ebf8ac",
        fontSize: 16
      },
      position: "right",
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        formatter: "{value} %", //右侧Y轴文字显示
        textStyle: {
          color: "rgba(250,250,250,0.6)",
          fontSize: 16
        }
      }
    }
    ],
    series: [
      {
        name: "总投资(亿元)",
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: true, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 8, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: "#2196F3",
          borderColor: "#2196F3",
          width: 2,
          shadowColor: "#2196F3",
          shadowBlur: 4
        },
        lineStyle: {
          color: "#2196F3",
          width: 2,
          shadowColor: "#2196F3",
          shadowBlur: 4
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: "rgba(61,126,235, 0.5)"
          },
          {
            offset: 1,
            color: "rgba(61,126,235, 0)"
          }
          ])
        },
        data: props.info1?.value1
      },
      {
        name: "完成率(%)",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "rgba(61,126,235, 1)"
            },
            {
              offset: 1,
              color: "rgba(61,126,235, 0)"
            }
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "rgba(160,196,225, 1)"
            },
            {
              offset: 1,
              color: "rgba(61,126,235, 1)"
            }
            ]),
            borderWidth: 2
          }
        },
        data: props.info1?.value2
      }
    ]
  };
  state.chartData.element1.setOption(option);
  state.myCharts.push(state.chartData.element1);
}

const initChart2 = () => {
  console.log('222')
  state.chartData.element2 = markRaw(echarts.init(elementChart2.value));
  let num = props.info2;
  const option = {
    backgroundColor: '#FF000000',
    title: [{
      // text: 'SPEED',
      x: 'center',
      top: '52%',
      textStyle: {
        color: '#fdf914',
        fontSize: 20,
        fontWeight: '100',
      }
    }, {
      text: `${num}%`,
      x: 'center',
      top: '45%',
      textStyle: {
        fontSize: '20',
        color: '#ffffff',
        fontFamily: 'Lato',
        fontWeight: '600',
      },
    }],
    polar: {
      radius: ['64%', '80%'],
      center: ['50%', '50%'],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false
      },
    },
    series: [
      {
        name: '',
        type: 'bar',
        roundCap: true,
        barWidth: 80,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(66, 66, 66, .3)',
        },
        data: [`${num}`],
        coordinateSystem: 'polar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#69FFE3'
            }, {
              offset: 1,
              color: '#69FFE3'
            }]),
          }
        }
      }
    ]
  };
  state.chartData.element2.setOption(option);
  state.myCharts.push(state.chartData.element2);
}

const initChart3 = () => {
  state.chartData.element3 = markRaw(echarts.init(elementChart3.value));
  let num = props.info3;
  const option = {
    backgroundColor: '#FF000000',
    title: [{
      // text: 'SPEED',
      x: 'center',
      top: '52%',
      textStyle: {
        color: '#fdf914',
        fontSize: 20,
        fontWeight: '100',
      }
    }, {
      text: `${num}%`,
      x: 'center',
      top: '45%',
      textStyle: {
        fontSize: '20',
        color: '#ffffff',
        fontFamily: 'Lato',
        fontWeight: '600',
      },
    }],
    polar: {
      radius: ['64%', '80%'],
      center: ['50%', '50%'],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,

      },
      axisTick: {
        show: false
      },
    },
    series: [
      {
        name: '',
        type: 'bar',
        roundCap: true,
        barWidth: 80,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(66, 66, 66, .3)',
        },
        data: [`${num}`],
        coordinateSystem: 'polar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#2196F3'
            }, {
              offset: 1,
              color: '#2196F3'
            }]),
          }
        }
      }
    ]
  };
  state.chartData.element3.setOption(option);
  state.myCharts.push(state.chartData.element3);
}

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
  nextTick(() => {
    for (let i = 0; i < state.myCharts.length; i++) {
      setTimeout(() => {
        state.myCharts[i].resize();
      }, i * 1000);
    }
  });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  window.addEventListener('resize', initEchartsResizeFun);
};

onBeforeUpdate(() => {
  initEchartsResize()
  initChart1();
  initChart2();
  initChart3();

})



const dialogTableRef = ref()
const dialogTable = defineAsyncComponent(() => import('@/components/left/dialogTable.vue'));
const openTableDialog = () => {
  dialogTableRef.value.openDialog()
}
</script>


<template>
  <div style="width: 100%;height: 100%;padding: 2px;box-sizing: border-box;">
    <div class="title" @click="openTableDialog" style="cursor: pointer;">引进重大项目和高能级项目</div>
    <div style="display: flex;width:calc(100% - 4px);height: calc(100% - 40px)">
      <div ref="elementChart1" style="flex: 6;height: 100%" />
      <div style="flex: 3;height: 100%;display: flex">
        <div ref="elementChart2" style="width: 100%;height: 100%" />
        <div ref="elementChart3" style="width: 100%;height: 100%" />
      </div>
    </div>
  </div>
  <dialog-table ref="dialogTableRef"></dialog-table>
</template>

<style scoped>
.title {
  background: linear-gradient(to right, #5ab6e42a 1%, transparent 100%);
  color: #fff;
  text-shadow: 0 0 25px #fff;
  font-weight: bold;
  padding: 8px 10px;
  font-size: 20px
}
</style>